{% extends './layout.html.twig' %}

{% block content %}
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Dashboard</h1>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.Content Header (Page header) -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <!-- /.card-header -->
                            <div class="card-body table-responsive p-0">
                                <table class="table table-bordered table-sm table-hover">
                                    <thead>
                                    <tr>
                                        <th class="th-hidden" colspan="3" scope="col"></th>

                                        {% for period in periods %}
                                            <th class="text-center period-start" scope="col" colspan="10">{{ period }}</th>
                                        {% endfor %}
                                    </tr>

                                    <tr>
                                        <th scope="col" style="border-top-width: 1px">Symbol</th>
                                        <th scope="col" style="border-top-width: 1px">Price</th>
                                        <th scope="col" style="border-top-width: 1px">24h</th>

                                        {% for period in periods %}
                                            <th class="text-uppercase" scope="col" data-toggle="tooltip" title="Trend Direction (ema 55 / ema 200)">T</th>
                                            <th class="text-uppercase" scope="col">s200/50</th>
                                            <th class="text-uppercase" scope="col">e200/55</th>
                                            <th class="text-uppercase" scope="col">rsi</th>
                                            <th class="text-uppercase" scope="col">cci</th>
                                            <th class="text-uppercase" scope="col">srsi</th>
                                            <th class="text-uppercase" scope="col">ao</th>
                                            <th class="text-uppercase" scope="col">macd</th>
                                            <th class="text-uppercase" scope="col">mfi</th>
                                            <th class="text-uppercase" scope="col">bb</th>
                                        {% endfor %}
                                    </tr>

                                    </thead>
                                    <tbody>

                                    {% for row in rows %}
                                        <tr>
                                            <td><i class="fa-fw {% if 'USD' in row.symbol %}fas fa-dollar-sign{% elseif 'PERP' in row.symbol %}fas fa-file-contract{% else %}fab fa-bitcoin{% endif %}"></i> <a target="blank" href="/tradingview/{{ row.exchange }}:{{ row.symbol|url_encode }}">{{ row.symbol }}</a></td>
                                            <td>{{ row.ticker.bid|price_format }}</td>
                                            <td style="white-space: nowrap">{% if row.percentage_change %}<span class="{{ row.percentage_change > 0 ? 'text-success' : 'text-danger' }}">{{ row.percentage_change|round(1) }} %</span>{% endif %}</td>

                                            {% for period in periods %}
                                                {% set ta = row.ta[period] %}
                                                <td class="period-start {{ ta.ema_55.value > ta.ema_200.value ? 'text-success' : 'text-danger' }}"><i class="fas {{ ta.ema_55.value > ta.ema_200.value ? 'fa-arrow-alt-circle-up' : 'fa-arrow-alt-circle-down' }}"></i></td>
                                                <td>
                                                    <span data-toggle="tooltip" title="{{ ta.sma_200.value|price_format }}" class="{{ row.ticker.bid > ta.sma_200.value ? 'text-success' : 'text-danger' }}"><i class="fas {{ row.ticker.bid > ta.sma_200.value ? 'fa-arrow-up' : 'fa-arrow-down' }}"></i></span>
                                                    <span data-toggle="tooltip" title="{{ ta.sma_50.value|price_format }}"  class="{{ row.ticker.bid > ta.sma_50.value ? 'text-success' : 'text-danger' }}"><i class="fas {{ row.ticker.bid > ta.sma_50.value ? 'fa-arrow-up' : 'fa-arrow-down' }}" style="font-size:0.65em"></i></span>
                                                </td>
                                                <td>
                                                    <span data-toggle="tooltip" title="{{ ta.ema_200.value|price_format }}"  class="{{ row.ticker.bid > ta.ema_200.value ? 'text-success' : 'text-danger' }}"><i class="fas {{ row.ticker.bid > ta.ema_200.value ? 'fa-arrow-up' : 'fa-arrow-down' }}"></i></span>
                                                    <span data-toggle="tooltip" title="{{ ta.ema_55.value|price_format }}"  class="{{ row.ticker.bid > ta.ema_55.value ? 'text-success' : 'text-danger' }}"><i class="fas {{ row.ticker.bid > ta.ema_55.value ? 'fa-arrow-up' : 'fa-arrow-down' }}" style="font-size:0.65em"></i></span>
                                                </td>
                                                <td class="
                                                    {% if ta.rsi.value >= 80 or ta.rsi.value <= 20 %}font-weight-bold {% endif %}
                                                    {% if ta.rsi.value <= 30 %}text-success{% endif %}
                                                    {% if ta.rsi.value >= 70 %}text-danger{% endif %}
                                                    {% if ta.rsi.value > 30 and ta.rsi.value < 50 %}text-warning{% endif %}
                                                    {% if ta.rsi.value > 50 and ta.rsi.value < 70 %}text-orange{% endif %}
                                                ">{{ ta.rsi.value|round(0) }}</td>
                                                                                    <td class="
                                                    {% if ta.cci.value >= 250 or ta.cci.value <= -250 %}font-weight-bold {% endif %}
                                                    {% if ta.cci.value <= -100 %}text-success{% endif %}
                                                    {% if ta.cci.value >= 100 %}text-danger{% endif %}
                                                    {% if ta.cci.value > -100 and ta.rsi.value < 100 %}text-warning{% endif %}
                                                ">{{ ta.cci.value|round(0) }}</td>
                                                <td>
                                                    {% if ta.stoch_rsi.value.stoch_k >= 80 and ta.stoch_rsi.value.stoch_d >= 80 %}
                                                        <i data-toggle="tooltip" title="{{ ta.stoch_rsi.value.stoch_k|round(2) }}" class="far fa-circle text-danger"></i>
                                                    {% elseif ta.stoch_rsi.value.stoch_k <= 20 and ta.stoch_rsi.value.stoch_d <= 20 %}
                                                        <i data-toggle="tooltip" title="{{ ta.stoch_rsi.value.stoch_k|round(2) }}" class="far fa-circle text-success"></i>
                                                    {% else %}
                                                        <i data-toggle="tooltip" title="{{ ta.stoch_rsi.value.stoch_k|round(2) }}" class="far fa-arrow-alt-circle-up {{ ta.stoch_rsi.value.stoch_k >= ta.stoch_rsi.value.stoch_d ? 'trend-up text-success' : 'trend-down text-danger' }}"></i>
                                                    {% endif %}
                                                </td>
                                                <td class="{{ ta.ao.value > 0 ? 'text-success' : 'text-danger' }}">
                                                    <i data-toggle="tooltip" title="{{ ta.ao.crossed }}m ago" class="fas fa-arrow-up {{ ta.ao.trend == 'up' ? 'trend-up' : 'trend-down' }} {% if (ta.ao.value > 0 and ta.ao.trend == 'down') or (ta.ao.value < 0 and ta.ao.trend == 'up') %}font-weight-bold{% endif %} {% if ta.ao.crossed_index < 5 %}blink{% endif %}"></i>
                                                </td>
                                                <td class="{{ ta.macd.value.histogram > 0 ? 'text-success' : 'text-danger' }}">
                                                    <i data-toggle="tooltip" title="{{ ta.macd.crossed }}m ago" class="far fa-arrow-alt-circle-up {{ ta.macd.trend == 'up' ? 'trend-up' : 'trend-down' }} {% if (ta.macd.value.histogram > 0 and ta.macd.trend == 'down') or (ta.macd.value.histogram < 0 and ta.macd.trend == 'up') %}font-weight-bold{% endif %} {% if ta.macd.crossed_index < 5 %}blink{% endif %}"></i>
                                                </td>
                                                <td class="
                                                    {% if ta.mfi.value <= 20 %}text-success{% endif %}
                                                    {% if ta.mfi.value >= 80 %}text-danger{% endif %}
                                                    {% if ta.mfi.value > 20 and ta.rsi.value < 80 %}text-warning{% endif %}
                                                ">{{ ta.mfi.value|round(0) }}</td>
                                                                                    <td style="white-space: nowrap" class="
                                                    {% if ta.bollinger_bands.percent >= 95 or ta.bollinger_bands.percent <= 5 %}font-weight-bold {% endif %}
                                                    {% if ta.bollinger_bands.percent <= 5 %}text-success{% endif %}
                                                    {% if ta.bollinger_bands.percent >= 95 %}text-danger{% endif %}
                                                    {% if ta.bollinger_bands.percent > 5 and ta.bollinger_bands.percent < 50 %}text-warning{% endif %}
                                                    {% if ta.bollinger_bands.percent > 50 and ta.bollinger_bands.percent < 95 %}text-orange{% endif %}
                                                    ">{{ ta.bollinger_bands.percent|round }} % </td>
                                            {% endfor %}
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
{% endblock content %}

{% block javascript %}
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
{% endblock javascript %}
